<template>
  <div>
    <div class="multr">
      <!-- 左边 大图 -->
      <div class="d1">
        <img
          class="img1"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29b39579739d82269d18f0e7c8f6c9da.jpg"
          alt=""
        />
      </div>
      <!-- 右边 小图 -->
      <div class="d2">
        <div>
          <img
            class="img2"
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b9af94e5c05bb2b4849cbb113eddb9d.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            class="img2"
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a12873ff30a6da401d74728878625c37.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 下方 大图 -->
    <div>
      <img
        class="b-img"
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beac5a54f4f4d93cb3f680a097b4f644.jpg"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.multr {
  display: flex;
}
/* 左边 大图 区域 */
.d1 {
  width: 50%;
  height: 265px;
}
/* 右边 小图 区域 */
.d2 {
  width: 50%;
  height: 265px;
}
/* 左边 大图 */
.img1 {
  width: 186.55px;
  height: 264.71px;
}
/* 右边 小图 */
.img2 {
  width: 186.55px;
  height: 130.31px;
}
/* 下方大图 */
.b-img{
    width: 100%;
    height: 229.29px;
}
</style>
